<template>
	<div class="theme">
		<van-nav-bar :title="$t('UpdateMb.v1')" :left-text="$t('MyDividend.v6')" left-arrow @click-left="onClickLeft" />
		<div class="overlay headTop" style="padding: 20px 10px 10px;">
			<div class="overlay-content scrolling" align="center">
				<van-cell-group>
					<van-field v-model.trim="Account" maxlength="20" readonly /></van-cell-group>
				<div align="left" style="padding: 15px 0px;color: #ebedf0;font-size: 13px;" v-if="list != '' && list != null">{{$t('UpdateMb.v2')}}</div>
				<van-cell-group style="background: #333952;color: #858dac;" v-if="list != '' && list != null" class="ts">
					<div style="color: white;font-size: 13px;background: #333952;">
						<div v-if="listArr != ''" style="padding-bottom: 10px;border-bottom: 1px solid #2c3145;">
							<van-grid :column-num="3">
								<van-grid-item v-for="(item, index) in list2" :key="Math.random()">
									<div class="yellow" style="border: 1px solid rgb(93,107,151);padding: 3px 10px;border-radius: 5px;">
										<span v-text="item" @click="setActive2(item, index)"></span>
									</div>
								</van-grid-item>
							</van-grid>
						</div>
						<van-cell-group class="two" style="background: #2C3145;color: #858dac;" v-if="list != '' && list != null">
							<div style="color: white;font-size: 13px;background: #2c3145;padding-bottom: 10px;">
								<van-grid :column-num="3">
									<van-grid-item v-for="(item, index) in list" :key="Math.random()" v-if="listArr.indexOf(index) == -1">
										<div :class="{ red: listArr.indexOf(index) != -1 }" style="border: 1px solid rgb(93,107,151);padding: 3px 10px;border-radius: 5px;">
											<span v-text="item" @click="setActive(item, index)"></span>
										</div>
									</van-grid-item>
								</van-grid>
							</div>
						</van-cell-group>
					</div>
				</van-cell-group>
				<van-cell-group style="border-bottom: 1px solid rgb(44, 49, 69);">
					<van-field :placeholder="$t('UpdateMb.v3')" maxlength="6" type="password" v-model.trim="payPwd" />
				</van-cell-group>
				<van-cell-group>
					<van-field :placeholder="$t('UpdateMb.v4')" maxlength="6" type="password" v-model.trim="payPwd2" /></van-cell-group>
				<div class="btn" style="margin-top:20px;">
					<van-button type="primary" @click.native="submit" :loading="loading" style="width: 100%;">{{$t('UpdateMb.v5')}}</van-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { Dialog } from 'vant';
	import { mine, base } from './../utils/api';
	let _this;
	export default {
		data() {
			return {
				Account: '',
				payPwd: '',
				payPwd2: '',
				k: '', //凭证K值
				v: '', //凭证V值
				loading: false,
				list: [],
				list2: [],
				listArray: [],
				listString: '',
				oc: '',
				listArr: [],
				indexType: true
			};
		},
		beforeCreate() {
			_this = this;
		},
		mounted() {
			this.getPer(); // 获取个人信息
		},
		methods: {
			getPer() {
				mine.getPersonal().then(res => {
					this.Account = res.data.userName;
					this.getUserName(); // 查询当前助记词
				});
			},
			getUserName() {
				// 助记词查询
				base
					.getUserNameZJC({
						userName: this.Account
					})
					.then(res => {
						if(res.code == 200) {
							this.list = res.data;
						}
					});
			},
			setActive(item, index) {
				this.oc = index;
				if(this.listArr.includes(index)) {
					this.listArr.splice(this.listArr.indexOf(index), 1);
					this.listArray.splice(this.listArray.indexOf(item), 1);
					this.list2.splice(this.listArray.indexOf(item), 1);
				} else {
					this.listArr.push(index);
					this.listArray.push(item);
					this.list2.push(item);
				}
				this.listString = this.listArray.join(' ');
				if(this.listArray.length == 12) {
					this.indexType = false;
				} else {
					this.indexType = true;
				}
			},
			setActive2() {
				this.list2 = [];
				this.listArr = [];
				this.listArray = [];
				this.listString = '';
			},
			submit() {
				if(!this.payPwd) {
					this.$toast(this.$t('UpdateMb.v6'));
					return false;
				}
				if(this.payPwd.length != 6) {
					this.$toast(this.$t('UpdateMb.v7'));
					return false;
				}
				if(!this.payPwd2) {
					this.$toast(this.$t('UpdateMb.v8'));
					return false;
				}
				if(this.payPwd2.length != 6) {
					this.$toast(this.$t('UpdateMb.v9'));
					return false;
				}
				if(this.payPwd != this.payPwd2) {
					this.$toast(this.$t('UpdateMb.v10'));
					return false;
				}
				this.loading = true;
				base.getCredentials().then(res => {
					if(res.code == 8008) {
						this.k = res.data.k;
						this.v = res.data.v;
						mine.getzhTradePassWrod({
								auxiliaries: this.listString,
								key: this.k,
								encryptedData: this.rsaEncrypt(this.payPwd + ',' + this.v)
							})
							.then(res => {
								if(res.code == 200) {
									setTimeout(() => {
										this.loading = false;
										this.$router.push({
											path: '/Safety'
										});
									}, 500);
								} else if(res.code == 500) {
									this.loading = false;
								}
								this.$toast(res.msg);
							});
					}
				});
			},
			onClickLeft() {
				this.$router.back(-1);
			}
		},
		watch: {
			payPwd: function() {
				this.payPwd = this.payPwd.replace(/[^\d]/g, ''); // 不能输入中文和字母
			},
			payPwd2: function() {
				this.payPwd2 = this.payPwd2.replace(/[^\d]/g, ''); // 不能输入中文和字母
			}
		}
	};
</script>

<style lang="less" scoped>
	.van-cell {
		background-color: #333952;
		color: #ffffff;
		font-size: 15px;
		padding: 15px;
	}
	
	/deep/ .weui-btn_primary {
		background: #3fb776 !important;
	}
	
	/deep/ .van-button--primary {
		background: #3fb776 !important;
		border: 1px solid #3fb776;
	}
	
	.van-hairline--top-bottom::after {
		border: 0;
	}
	
	.btn {
		padding: 0 10px 0px;
	}
	
	/deep/ .van-field__control {
		color: #ffffff;
	}
	
	/deep/ .van-cell:not(:last-child)::after {
		border: 0;
	}
	
	.text {
		padding: 20px;
		text-align: center;
		font-size: 13px;
	}
	
	.red {
		border: 1px solid #3fb776 !important;
		background: #3fb776 !important;
	}
	
	.yellow {
		border: 1px solid rgb(93, 107, 151) !important;
		background: rgb(93, 107, 151) !important;
	}
	
	/deep/ .van-grid-item__content {
		background: #333952;
		padding: 10px 5px;
	}
	
	/deep/ .van-hairline--top::after {
		border: 0;
	}
	
	/deep/ .van-grid-item__content::after {
		border: 0;
	}
	
	/deep/ .van-grid-item__content {
		float: left;
	}
	
	/deep/ .van-grid.van-hairline--top {
		background: #333952;
	}
</style>